<template>
  <div :id="localUUID" class="c-chartrose"></div>
</template>

<script>
import moment from 'moment'
import { Chart } from '@antv/g2'
import { createUUID } from '@/common/js/mUtils'
import componentRefresh from '@/mixins/componentRefresh'
import { cloneDeep } from 'lodash'
// 准备数据
const DATA = [
  { name: '冀东', value: 0.2 },
  { name: '恒东', value: 0.35 },
  { name: '枣矿', value: 0.45 }
]
const SHAPE = {
  矩形: 'square',
  圆形: 'circle',
  三角型: 'triangle',
  线型: 'line',
  连字符: 'hyphen'
}
const LAYOUT = {
  水平排列: 'horizontal',
  垂直排列: 'vertical'
}
const POSITION = {
  上对齐: 'top',
  上左对齐: 'top-left',
  上右对齐: 'top-right',
  下对齐: 'bottom',
  下左对齐: 'bottom-left',
  下右对齐: 'bottom-right',
  左对齐: 'left',
  左上对齐: 'left-top',
  左下对齐: 'left-bottom',
  右对齐: 'right',
  右上对齐: 'right-top',
  右下对齐: 'right-bottom'
}
export default {
  name: 'CChartrose',
  mixins: [componentRefresh],
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    ratio: {
      type: Number,
      default: 1
    },
    uuid: String
  },
  data() {
    return {
      localUUID: createUUID()
    }
  },
  computed: {
    dataTrigger() {
      if (this.props[1].fields[0].value.dataJson.json) {
        const result = this.props[1].fields[0].value.dataJson.json
        let dataobj = '{}'
        try {
          dataobj = JSON.parse(result)
        } catch (e) {
          console.warn(e)
          this.$message.error('JSON格式有误请重试')
          dataobj = {}
        }
        return dataobj
      } else {
        return DATA
      }
    },
    modelTrigger() {
      return this.props[1].fields[0].value.dataJson.model
    },
    LegendTextColor() {
      return this.props[0].fields[3].value[0].value.value
    },
    LegendSize() {
      return this.props[0].fields[3].value[1].value.value
    },
    LegendStyle() {
      return this.props[0].fields[3].value[2].value.value
    },
    LegendAlign() {
      return this.props[0].fields[3].value[3].value.value
    },
    LegendPosition() {
      return this.props[0].fields[3].value[4].value.value
    },
    ChageColor() {
      return this.props[0].fields[3].value[5].value.value
    },
    ChageColorChange() {
      return this.props[0].fields[3].value[6].value.value
    }
  },
  watch: {
    dataTrigger(val) {
      if (val && this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    LegendSize(val) {
      // 图例文字大小
      if (val && this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    modelTrigger() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    LegendTextColor(val) {
      if (val && this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    LegendStyle(val) {
      this.legend()
      this.chartInstance.render()
    },
    LegendAlign(val) {
      this.legend()
      this.chartInstance.render()
    },
    LegendPosition(val) {
      this.legend()
      this.chartInstance.render()
    },
    ChageColor(val) {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    ChageColorChange() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    width(val) {
      this.resizeChart()
    },
    height(val) {
      this.resizeChart()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const width = parseInt(this.width)
      const height = parseInt(this.height)
      this.initMapping()

      this.chartInstance = new Chart({
        container: this.localUUID,
        autoFit: true, // 是否自适应
        width: width,
        height: height
      })
      this.chartInstance.coordinate('polar', {
        innerRadius: 0.2
      })
      const mData = this.dataTrigger
      this.chartInstance.data(mData) // 注入数据
      this.chartInstance.scale(this.mappings[1].field, {
        // 缩放比率
        formatter: val => {
          val = (val * 100).toFixed(0) + '%'
          return val
        }
      })
      this.chartInstance.axis(false)
      this.chartInstance.tooltip({
        showMarkers: false
      })
      const temp_color = this.ChageColor || []
      const colordata = temp_color.map((item, index) => {
        return `l(180) 0:${item} 1:${this.ChageColorChange[index] || item}`
      })
      this.chartInstance
        .interval()

        .position(`${this.mappings[0].field}*${this.mappings[1].field}`)
        .color(this.mappings[0].field, colordata) // 创建几何图形
        .label('value', {
          style: {
            // 文字样式
            fill: this.LegendTextColor,
            fontSize: this.LegendSize
          },
          content: data => {
            // 外圈的文字
            return `${data[this.mappings[0].field]}: ${data[this.mappings[1].field] * 100 + '%'}`
          }
        })
        .adjust('stack') // 调整
      this.chartInstance.tooltip({
        // tooltip
        showMarkers: false,
        showTitle: false
      })
      this.legend() // 图例位置
      this.chartInstance.interaction('element-active') // 交互方式
      this.chartInstance.render() // 渲染
    },
    initMapping() {
      // 读取自定义数据
      const model = this.props[1].fields[0].value.dataJson.model
      this.mappings = model.map(m => {
        const field = m.field
        const mapping = m.mapping
        const key = mapping || field
        return { field: key }
      })
      if (!this.props[1].fields[0].value.dataJson.json) {
        this.mappings = [
          {
            field: 'name'
          },
          {
            field: 'value'
          }
        ]
      }
    },
    resizeChart() {
      const width = parseInt(this.width)
      const height = parseInt(this.height)
      this.chartInstance.changeSize(width, height)
    },
    legend() {
      this.chartInstance.legend({
        itemName: {
          style: { fill: this.LegendTextColor, fontSize: this.LegendSize }
        },
        marker: {
          symbol: SHAPE[this.LegendStyle]
        },
        layout: LAYOUT[this.LegendAlign],
        position: POSITION[this.LegendPosition]
      })
    }
  }
}
</script>

<style>
.c-chartpie {
  width: 100%;
  height: 100%;
}
</style>
